<template>
    <div class="InboundList-box">
       <!-- 活动信息 -->
        <h3 class="mb16">活动信息</h3>
        <!-- 搜索栏 -->
        <serchForm :Form="inventoryForm" :FormLabel="inventoryFormLabel" @onSearch="onSearch" />
        <h3 class="mb16">已报名学生信息</h3>
        <!-- 增删改查 -->
        <div class="function-box" v-if="checkPermi(['system:inventory:edit'])">
                <el-button class="createBtn">通过</el-button>
                <el-button class="createBtn">下载</el-button>
                <el-button class="createBtn">新增</el-button>
                <el-button class="exportBtn">删除</el-button>
        </div>
        <!-- 活动信息列表页面 -->
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="inventoryTableHeaderData"
      :tableData="inventoryTableData"
      :auditOperation='auditOperation'
      @auditDetele="auditDetele"
      @auditPass="auditPass"
      :download="download"
      @downloadPass="downloadPass"
    >
    </forTableCom>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import serchForm from '@/components/inventory/serchForm.vue'
import { checkPermi } from '@/utils/permission.js'
import forTableCom from '@/components/forTableCom/index.vue'
import { ElMessage,ElMessageBox } from 'element-plus'

const router = useRouter();
const route = useRoute();
const data = reactive({});

// 表单
let inventoryForm = ref({
  productCode:'',//活动类型
  inDate: '', // 活动时间
  inDate2: '', // 报名截止时间
  huodong: '', // 活动标题
  productName: '', // 活动范围
})
// 表单数据标题
let inventoryFormLabel = ref([
  {
    name: 'inDate',
    label: '活动时间',
    type: 'datetimerange',
  },
  {
    name: 'huodong',
    label: '活动标题',
  },
  {
    name: 'productCode',
    label: '活动类型',
  },
  {
    name: 'inDate2',
    label: '报名截止时间',
    type: 'datetimerange',
  },
  {
    name: 'productName',
    label: '活动范围',
  },
])
// 查找
const onSearch = (v) => {
  console.log(v,'查看入库页面时间参数')
  // 每次查询后回到页1
  pageNum.value = 1
}

// 显示操作栏
const auditOperation = ref(true)
//显示下载按钮操作栏
const download = ref(true)
let idActive = 'id'
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')
// 总条目数   pageSize 加 1
let totals = ref(0)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])
// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v,'打印v')
}
// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  let params = inventoryForm.value
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v)
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v)
}
// 表格表头数据
let inventoryTableHeaderData = ref([
  {
    prop: 'xuehao',
    label: '学号',
  },
  {
    prop: 'warehouseName',
    label: '学生姓名',
  },
  {
    prop: 'nianling',
    label: '年龄',
  },
  {
    prop: 'xingbie',
    label: '性别',
  },
  {
    prop: 'yuanxi',
    label: '学生院系',
  },
  {
    prop: 'zhuanye',
    label: '学生专业',
  },
  {
    prop: 'banji',
    label: '学生班级',
  },
  {
    prop: 'inDate',
    label: '报名时间',
  },
  {
    prop: 'status',
    label: '状态',
  },
  {
    prop: 'defen',
    label: '得分情况',
  },
])
// 表格数据内容
let inventoryTableData = ref([
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:1
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:2
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:3
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:4
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:5
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:6
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:7
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:8
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:9
    },
    {
      xuehao:'0123456',
      warehouseName:'张三',
      nianling:'17',
      xingbie:'男',
      yuanxi:'经济管理学院',
      zhuanye:'电子商务',
      banji:'电子商务1班',
      inDate:'2024-08-23 18:12',
      status:'已通过',
      defen:'100分',
      id:10
    },
])
const auditDetele = (val)=>{  //列表单个删除操作
      let {i , v} = val
      ElMessageBox.confirm(
    '确定要删除该文件吗?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
         inventoryTableData.value.splice(i,1)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}
const auditPass = (val)=>{ //通过按钮
    let {i , v} = val
}
const downloadPass = (val)=>{ //下载按钮
    let {i , v} = val
}
onMounted(()=>{
    
})

</script>

<style lang='scss' scoped>
.InboundList-box {
    padding: 16px;
    .function-box {
    display: flex;
    align-items: center;
  }
}
:deep(.el-form-item:nth-child(4) .el-form-item__label) {
  margin-left: 0;
}
</style>
